import { Button, InputNumber, Form, Input, message, Modal } from 'antd';
import React, { useState } from 'react';
import request from 'umi-request';
import { render } from 'react-dom';

function Money(props) {
  let [money, setMoney] = useState(0);

  const [addForm] = Form.useForm();
  const [subForm] = Form.useForm();
  const [transForm] = Form.useForm();

  const account = window.JSON.parse(sessionStorage.getItem('account'));

  const [addMoneyVisible, setAddMoneyVisible] = useState(false);
  const [subMoneyVisible, setSubMoneyVisible] = useState(false);
  const [transMoneyVisible, setTransMoneyVisible] = useState(false);

  const getMoney = () => {
    console.log(props);
    request
      .get('http://123.60.20.244:8080/atm/account/getMoneyByUserName', {
        params: {
          user_name: account.user_name,
        },
      })
      .then((response) => {
        console.log(response);
        setMoney((money = response.balance));
      });
  };

  const addMoney = (values) => {
    request
      .post('http://123.60.20.244:8080/atm/account/addMoney', {
        params: {
          user_name: account.user_name,
          money: values.money,
          a_pw: values.password,
        },
      })
      .then((response) => {
        console.log(response);
        if (response.code === 0) {
          setMoney((money = response.balance));
          message.success({
            content: response.message,
            key: 'global_key',
            duration: 2,
          });
        } else {
          message.error({
            content: response.message,
            key: 'global_key',
            duration: 2,
          });
        }
      });
  };

  const subMoney = (values) => {
    request
      .post('http://123.60.20.244:8080/atm/account/subMoney', {
        params: {
          user_name: account.user_name,
          money: values.money,
          a_pw: values.password,
        },
      })
      .then((response) => {
        console.log(response);
        if (response.code === 0) {
          setMoney((money = response.balance));
          message.success({
            content: response.message,
            key: 'global_key',
            duration: 2,
          });
        } else {
          message.error({
            content: response.message,
            key: 'global_key',
            duration: 2,
          });
        }
      });
  };

  const transMoney = (values) => {
    request
      .post('http://123.60.20.244:8080/atm/account/transMoney', {
        params: {
          user_name: account.user_name,
          money: values.money,
          toId: values.id,
          a_pw: values.password,
        },
      })
      .then((response) => {
        if (response.code === 0) {
          setMoney((money = response.balance));
          message.success({
            content: response.message,
            key: 'global_key',
            duration: 2,
          });
        } else {
          message.error({
            content: response.message,
            key: 'global_key',
            duration: 2,
          });
        }
      });
  };

  const handleAddOk = () => {
    setAddMoneyVisible(false);
    const value = addForm.getFieldsValue();
    if (
      typeof value.money === 'undefined' ||
      typeof value.password === 'undefined'
    ) {
      message.error({
        content: '请输入完整信息',
        key: 'global_key',
        duration: 2,
      });
    } else {
      addMoney(addForm.getFieldsValue());
    }
  };

  const handleAddCancel = () => {
    setAddMoneyVisible(false);
  };

  const handleSubOk = () => {
    setSubMoneyVisible(false);
    const value = subForm.getFieldsValue();
    console.log(value);
    if (
      typeof value.money === 'undefined' ||
      typeof value.password === 'undefined'
    ) {
      message.error({
        content: '请输入完整信息',
        key: 'global_key',
        duration: 2,
      });
    } else {
      subMoney(subForm.getFieldsValue());
    }
  };

  const handleSubCancel = () => {
    setSubMoneyVisible(false);
  };

  const handleTransOk = () => {
    setTransMoneyVisible(false);
    const value = transForm.getFieldsValue();
    console.log(value);
    if (
      typeof value.money === 'undefined' ||
      typeof value.id === 'undefined' ||
      typeof value.password === 'undefined'
    ) {
      message.error({
        content: '请输入完整信息',
        key: 'global_key',
        duration: 2,
      });
    } else {
      transMoney(value);
    }
  };

  const handleTransCancel = () => {
    setTransMoneyVisible(false);
  };

  return (
    <div>
      <Button onClick={getMoney}>查看当前余额</Button>
      <div>你的账户余额为:{money}</div>
      <Button onClick={() => setAddMoneyVisible(true)}>存钱</Button>
      <Modal
        title="存钱"
        visible={addMoneyVisible}
        onOk={handleAddOk}
        onCancel={handleAddCancel}
      >
        <div>
          <Form form={addForm}>
            <Form.Item
              label="金额"
              name="money"
              rules={[{ required: true, message: '请输入金额' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <Input type="password" />
            </Form.Item>
          </Form>
        </div>
      </Modal>
      <Button onClick={() => setSubMoneyVisible(true)}>取钱</Button>
      <Modal
        title="取钱"
        visible={subMoneyVisible}
        onOk={handleSubOk}
        onCancel={handleSubCancel}
      >
        <div>
          <Form form={subForm}>
            <Form.Item
              label="金额"
              name="money"
              rules={[{ required: true, message: '请输入金额' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <Input type="password" />
            </Form.Item>
          </Form>
        </div>
      </Modal>
      <Button onClick={() => setTransMoneyVisible(true)}>转账</Button>
      <Modal
        title="转账"
        visible={transMoneyVisible}
        onOk={handleTransOk}
        onCancel={handleTransCancel}
      >
        <div>
          <Form form={transForm}>
            <Form.Item
              label="金额"
              name="money"
              rules={[{ required: true, message: '请输入金额' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="收款人ID"
              name="id"
              rules={[{ required: true, message: '请输入收款人ID' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <Input type="password" />
            </Form.Item>
          </Form>
        </div>
      </Modal>
    </div>
  );
}

export default Money;
